<template>
  <div class="header">
    <span>我的选号</span>

    <div class="Dichroic_first">
      <div class="Dichroic_first_header">
        双色球
        <span>2020028期</span>
      </div>
      <ul class="box-list">
        <li>
          <span>单式</span>
          <ul>
            <li>05</li>
            <li>07</li>
            <li>09</li>
            <li>15</li>
            <li>20</li>
            <li>30</li>
            <li class="blue">11</li>
          </ul>
        </li>
        <img src="../../assets/image/moreChange.png" />
      </ul>
    </div>

    <div class="Dichroic_first">
      <div class="Dichroic_first_header">
        双色球
        <span>2020028期</span>
        <van-checkbox v-model="checked" v-show="checked==true" class="checkbox"></van-checkbox>
      </div>

      <ul class="Solid">
        <li>01</li>
        <li>04</li>
        <li>09</li>
        <li>18</li>
        <li>11</li>
        <li>51</li>
        <li class="Sblue">01</li>
      </ul>

      <ul class="box-list">
        <li>
          <span>单式</span>
          <ul>
            <li>05</li>
            <li>07</li>
            <li>09</li>
            <li>15</li>
            <li>20</li>
            <li>30</li>
            <li class="blue">11</li>
          </ul>
          <img src="../../assets/image/moreChange.png" />
        </li>
      </ul>
    </div>

    <div class="ovflow">
      <div class="ovflow_container">
        <div class="overAll">
          <van-checkbox v-model="allchecked">全选</van-checkbox>
        </div>
        <div class="delate" @click="handShowHiden">删除</div>
      </div>
    </div>

    <!-- 遮罩层 -->
    <van-popup v-model="show">
      <div class="ovflowOK">
        <h1>温馨提示</h1>
        <p>确认要删除么?</p>
        <div class="oveeflowChange">
          <div @click="handDelate">取消</div>
          <div @click="handOk">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>


<script>
// 点击确认时 首先获取 到上部分摁牛为 true 的结合 然后在进行接口截取
import bus from "../../utils/bus";
import Vue from "vue";
// 全选框  弹出层
import { Checkbox, Popup } from "vant";

Vue.use(Checkbox);
Vue.use(Popup);

export default {
  name: "ChnageNumList",
  data() {
    return {
      checked: "",
      allchecked: "", //全选判断
      show: false
    };
  },
  methods: {
    // 展示弹出框
    handShowHiden() {
      this.show = true;
    },
    // 消失 取消
    handDelate() {
      this.show = false;
    },
    // 消失 确认
    handOk() {
      this.show = false;
    }
  },
  // 来自组件传递的数值

  created() {
    bus.$on("sedn", data => {
      this.checked = data;
    });
  }
};
</script>

<style scoped>
.ovflowOK {
  width: 2.95rem;
  height: 1.43rem;
  box-sizing: border-box;
  padding: 0.2rem;
}
.ovflowOK h1 {
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
.oveeflowChange {
  display: flex;
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  color: #ff0000;
}
.oveeflowChange div {
  padding-left: 0.2rem;
}

.ovflowOK p {
  margin-top: 0.15rem;
  color: #666666;
  font-size: 14px;
  line-height: 20px;
}
.ovflow {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #fff;
  height: 0.5rem;
}
.ovflow_container {
  display: flex;
  height: 0.5rem;
  align-items: center;
}
.overAll {
  padding-left: 0.2rem;
  width: 80%;
}

/* 遮罩层 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

.delate {
  width: 1.15rem;
  background: #cccccc;
  height: 100%;
  text-align: center;
  line-height: 0.5rem;
  color: #ffffff;
}

.checkbox {
  float: right;
}
img {
  position: absolute;
  right: 0.15rem;
  top: 0.1rem;
}

.blue {
  color: #5f92fb;
}
.Sblue {
  background: #5187ff !important ;
}
.header {
  background: #f2f2f6;
  height: 570px;
  padding: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  font-size: 12px;
}
.Dichroic_first {
  width: 3.45rem;
  background: #fff;
  margin: 0.1rem 0;
  padding: 0.13rem 0;
}
.Dichroic_first_header {
  margin: 0.1rem;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
}
.Dichroic_first_header span {
  font-size: 12px;
  line-height: 100%;
  margin-left: 0.1rem;
}
/* 实心球 */
.Solid {
  display: flex;
}
.Solid li {
  width: 25px;
  height: 25px;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  background: #f84848;
  margin: 10px 2px;
  color: #ffffff;
}
/* 每一条内容 */
.box-list {
  position: relative;
}
.box-list li {
  height: 0.4rem;
  display: flex;
  align-items: center;
  padding-left: 0.1rem;
  border-top: 1px solid #e4e4e4;
}
.box-list li span {
  color: #333333;
}

/* 没一串数字 */
.box-list li ul {
  display: flex;
  margin-left: 0.1rem;
  color: #f84848;
}
</style>